<template>
	<div>
		<basic-container>
			<!-- 以下是顶部搜索表单 -->
			<div class="madp-group-list-search" :class="{ isFold: isFold }">
				<el-form :inline="true" ref="refForm" :model="refForm" label-width="85px">
					<div class="madp-ref-item">
						<el-form-item label="选择成员:" prop="member">
							<el-popover placement="top-start" width="200" trigger="hover" v-if="selectedMembers && selectedMembers.length > 0">
								<div class="madp-member-wrap">
									<el-tag type="primary" style="margin: 2px" v-for="(item, index) in selectedMembers" :key="index">{{ item.employeeName }}</el-tag>
								</div>
								<div slot="reference">
									<el-button class="madp-addmember" @click="addMemder">选择成员</el-button>
								</div>
							</el-popover>
							<el-button v-else class="madp-addmember" @click="addMemder">选择成员</el-button>
						</el-form-item>

						<el-form-item label="选择分组:" prop="group">
							<el-select v-model="refForm.intelligentGroupId" placeholder="请选择">
								<el-option v-for="item in groupList" :key="item.groupId" :label="item.groupName" :value="item.groupId"></el-option>
							</el-select>
						</el-form-item>
					</div>

					<div class="madp-ref-item">
						<el-form-item label="选择群聊:" prop="groupChat">
							<el-popover placement="top-start" width="200" trigger="hover" v-if="selectedRooms && selectedRooms.length > 0">
								<div>
									<el-tag type="primary" style="margin: 2px" v-for="(item, index) in selectedRooms" :key="index">{{ item.roomName }}</el-tag>
								</div>
								<div slot="reference">
									<el-button class="madp-addmember" @click="selectGroupChat">选择群聊</el-button>
								</div>
							</el-popover>
							<el-button v-else class="madp-addmember" @click="selectGroupChat">选择群聊</el-button>
						</el-form-item>
						<el-form-item label="创建日期:" prop="createTime">
							<el-date-picker
								v-model="refForm.dataList"
								type="daterange"
								range-separator="至"
								start-placeholder="开始日期"
								end-placeholder="结束日期"
								:picker-options="{
									disabledDate(time) {
										return time.getTime() > Date.now();
									},
								}"
							></el-date-picker>
						</el-form-item>
					</div>
					<el-form-item class="madp-item-btn">
						<el-button type="primary" @click="handleSearch" style="margin-left: 5px">搜索</el-button>
						<el-button @click="handleDelete">清空</el-button>
					</el-form-item>
				</el-form>
			</div>
			<!-- 以下是敏感监控数据列表 -->
			<div class="madp-table">
				<el-table
					:data="tableData"
					:header-cell-style="{
						background: 'rgb(255, 191, 191)',
						color: 'rgb(44,44,44)',
					}"
					stripe
				>
					<el-table-column fixed prop="id" align="center" label="序号">
						<template slot-scope="scope">
							<span v-text="getIndex(scope.$index)"></span>
						</template>
					</el-table-column>
					<el-table-column prop="sensitiveWordName" align="center" label="敏感词"></el-table-column>
					<el-table-column prop="sourceType" align="center" label="触发来源"></el-table-column>
					<el-table-column prop="triggerName" align="center" label="触发人"></el-table-column>
					<el-table-column prop="triggeringScenarios" align="center" label="触发场景"></el-table-column>
					<el-table-column prop="triggerTime" align="center" label="触发时间"></el-table-column>
					<el-table-column fixed="right" label="操作" align="center">
						<template slot-scope="scope">
							<el-button @click="handleClick(scope.row.id)" type="text">对话详情</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<!-- 选择群聊 -->
			<div>
				<el-dialog title="选择群聊" :close-on-click-modal="false" :visible.sync="dialogVisible" width="40%" :before-close="handleClose" top="5vh">
					<el-input class="madp-search-input" placeholder="输入群名称" prefix-icon="el-icon-search" v-model.trim="groupSearch" @search="onSearch"></el-input>
					<div class="madp-warn-toast">只显示历史上设置过违规提醒的群聊。如曾经设置过某群聊违规提醒，现在该群聊不再设置，那么其历史触发敏感词的监控内容，依然在列表中可见。</div>
					<div style="margin: 15px 0">全部群聊&nbsp;({{ groupChatListPage.total }})</div>
					<div class="madp-group-table">
						<el-table
							ref="multipleTable"
							:data="groupChatList"
							tooltip-effect="dark"
							style="width: 100%"
							@selection-change="handleSelectionChange"
							:header-cell-style="{
								background: 'rgb(255, 191, 191)',
								color: 'rgb(44,44,44)',
							}"
							:stripe="true"
						>
							<el-table-column type="selection" width="55"></el-table-column>
							<el-table-column prop="groupChat" label="群聊">
								<template slot-scope="scope">
									<div class="madp-content-display">
										<img style="width: 52px; height: 52px" src="/img/user.png" alt />
										<div class="madp-content-text">
											<p>{{ scope.row.roomName }}</p>
											<p class="madp-content-desc">
												{{ scope.row.currentNum + '/' + scope.row.roomMax }}
											</p>
										</div>
									</div>
								</template>
							</el-table-column>
						</el-table>
					</div>
					<!-- 分页 -->
					<div class="madp-pagination">
						<el-pagination
							@size-change="groupChatListHandleSizeChange"
							@current-change="groupChatListHandleCurrentChange"
							:current-page="groupChatListPage.current"
							:page-sizes="[10, 20, 30, 50, 100]"
							:page-size="groupChatListPage.size"
							layout="total, sizes, prev, pager, next, jumper"
							:total="groupChatListPage.total"
						></el-pagination>
					</div>

					<span slot="footer" class="dialog-footer">
						<el-button @click="dialogVisible = false">取消</el-button>
						<el-button type="primary" @click="dialogVisible = false">确定</el-button>
					</span>
				</el-dialog>
			</div>
			<!-- 分页 -->
			<div class="madp-pagination-wrap">
				<el-pagination
					background
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="page.currentPage"
					:page-sizes="[10, 20, 30, 50, 100]"
					:page-size="page.pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="page.total"
				></el-pagination>
			</div>
			<div v-if="memberVisible">
				<addmember @getMemberList="getMemberList" @closepop="closepop" :showAddMember="showAddMember" @search="searchEmp" :selectedMembers="selectedMembers"></addmember>
			</div>
		</basic-container>
		<!-- 对话详情 -->
		<el-dialog
			title="对话详情"
			:close-on-click-modal="false"
			:visible.sync="detailVisible"
			width="40%"
			:before-close="
				() => {
					detailVisible = false;
					activedTab = '0';
				}
			"
			top="8vh"
		>
			<div class="madp-box">
				<div>
					<el-tabs v-model="activedTab">
						<el-tab-pane label="全部" name="0"></el-tab-pane>
						<el-tab-pane label="文本" name="1"></el-tab-pane>
						<el-tab-pane label="图片" name="2"></el-tab-pane>
						<el-tab-pane label="链接" name="13"></el-tab-pane>
						<el-tab-pane label="语音通话" name="4"></el-tab-pane>
						<el-tab-pane label="视频" name="5"></el-tab-pane>
					</el-tabs>
					<el-scrollbar>
						<div v-if="!chatList || chatList.filter((item) => item.type === Number(activedTab) || Number(activedTab) === 0).length === 0" class="madp-chat-nodata">
							<img src="/img/nodata.png" alt />
							<span>暂无聊天记录</span>
						</div>
						<div class="madp-chatInfo" v-for="(it, i) in chatList.filter((item) => item.type === Number(activedTab) || Number(activedTab) === 0)" :key="i">
							<div>
								<div
									:class="{
										'madp-customer': it.source == 1,
										'madp-employee': it.source == 2,
									}"
								>
									<div class="madp-chat">
										<div class="madp-chat-info" v-if="it.type !== 8">
											<span class="madp-chat-info-user" v-if="it.source == 1">{{ it.sender }}</span>
											<span class="madp-chat-info-time">
												{{ it.sendTime }}
											</span>
											<span class="madp-chat-info-user" v-if="it.source == 2">{{ it.sender }}</span>
										</div>
										<div class="madp-chat-content">
											<p v-if="it.type === 1" class="madp-chat-content-text">{{ it.content.content }}</p>
											<div v-if="it.type === 2" class="madp-chat-content-box">
												<img :src="it.content.ossPath" />
											</div>
											<p v-if="it.type === 13" class="madp-chat-content-chat">
												<a :href="it.content.link_url" target="_blank"> {{ it.content.title }}（这是一个链接,可点击） </a>
											</p>
											<div v-if="it.type === 4 || it.type === 7" class="madp-chat-content-box">
												<audio :src="it.content.ossPath" controls="controls"></audio>
											</div>
											<div v-if="it.type === 5" class="madp-chat-content-box">
												<video :src="it.content.ossPath" controls="controls"></video>
											</div>
											<div v-if="it.type == 8" class="madp-chat-content-remove">"{{ it.sender }}" 撤回一条消息</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</el-scrollbar>
				</div>
			</div>
		</el-dialog>
	</div>
</template>
<script>
import addmember from '@/components/wechat/add-member';
import { sensitiveWordsGroupList } from '@/api/sensitive/sensitive-thesaurus';
import { sensitiveWordsMonitor, monitorDetail, groupChatList } from '@/api/sensitive/sensitive-monitor';
import { dateFormat } from '@/util/date';
export default {
	components: {
		addmember,
	},
	props: [],
	data() {
		return {
			dialogVisible: false,
			groupSearch: '',
			refForm: {
				intelligentGroupId: '',
				groupName: '',
				createTime: [],
			},
			isFold: false, // 切换更多
			showAddMember: false,
			memberVisible: false,
			tableData: [],
			groupList: [], //分组下拉列表
			groupChatList: [], //群聊列表
			// 分页
			page: {
				total: 0, // 总页数
				currentPage: 1, // 当前页数
				pageSize: 10, // 每页显示多少条
			},
			groupChatListPage: {
				total: 0, // 总页数
				current: 1, // 当前页数
				size: 10, // 每页显示多少条
			},
			employeeIdList: '',
			roomIdList: [],
			dataList: '',
			detailVisible: false, // 对话详情弹框显隐
			detailInfo: {}, // 对话详情
			chatList: [],
			activedTab: '0',
			selectedMembers: [], // 选中的人员
			selectedRooms: [], // 选中的群聊
		};
	},
	mounted() {
		this.getTableData();
		this.getGroupList();
		this.getGroupChatList();
	},

	methods: {
		//获取表格序号
		getIndex($index) {
			return (this.page.currentPage - 1) * this.page.pageSize + $index + 1;
		},
		//获取敏感词监控列表
		getTableData() {
			const params = {
				employeeId: this.employeeIdList,
				workRoomId: this.roomIdList.join(','),
				intelligentGroupId: this.refForm.intelligentGroupId,
				dataList: this.refForm.dataList,
				current: this.page.currentPage,
				size: this.page.pageSize,
			};
			if (params.dataList) {
				params.triggerStart = dateFormat(params.dataList[0]).slice(0, 10);
				params.triggerEnd = dateFormat(params.dataList[1]).slice(0, 10);
				delete params.dataList;
			}
			sensitiveWordsMonitor(params).then((res) => {
				this.tableData = res.data.data.records;
				this.page.total = res.data.data.total;
			});
		},
		// 获取分组列表
		getGroupList() {
			sensitiveWordsGroupList().then((res) => {
				this.groupList = res.data.data;
			});
		},
		searchEmp(data) {
			if (data.length === 0) {
				this.employeeIdList = '空';
			} else {
				this.employeeIdList = data[0].id;
			}
		},
		onSearch(value) {
			this.groupSearch = value;
			this.getGroupChatList();
		},
		/**
		 * 选择成员组件的方法
		 */
		getMemberList(data) {
			const arr = [];
			data.map((item) => {
				arr.push(item.employeeId);
			});
			this.employeeIdList = arr.join(',');
			this.selectedMembers = data;
		},
		closepop() {
			this.showAddMember = false;
		},
		addMemder() {
			this.memberVisible = true;
			this.showAddMember = true;
		},

		handleClose() {
			this.dialogVisible = false;
		},
		selectGroupChat() {
			this.dialogVisible = true;
		},
		/**
		 * 搜索
		 */
		handleSearch() {
			this.page.currentPage = 1;
			this.getTableData();
		},
		/**
		 * 清空
		 */
		handleDelete() {
			let _this = this;
			_this.refForm = {};
			_this.roomIdList = []; //选择群聊列表
			_this.employeeIdList = '';
			_this.employees = [];
			_this.page.current = 1;
			_this.dataList = [];
			if (this.$refs.multipleTable) {
				this.$refs.multipleTable.clearSelection();
			}
			this.memberVisible = false;
			this.getTableData();
		},
		/**
		 * 对话详情
		 */
		handleClick(id) {
			monitorDetail(id)
				.then((res) => {
					if (res.data.code === 0) {
						this.chatList = res.data.data || [];
						this.detailVisible = true;
					}
				})
				.catch((err) => {});
		},
		// 分页
		handleSizeChange(pageSize) {
			this.page.pageSize = pageSize;
			this.getTableData();
		},
		handleCurrentChange(currentPage) {
			this.page.currentPage = currentPage;
			this.getTableData();
		},
		handleSelectionChange(val) {
			this.roomIdList = val.map((item) => item.roomId);
			this.selectedRooms = val;
		},
		// 群聊分组
		getGroupChatList() {
			let obj = {
				name: this.groupSearch,
				current: this.groupChatListPage.current,
				size: this.groupChatListPage.size,
			};
			groupChatList(obj).then((res) => {
				if (res.data.code === 0) {
					this.groupChatList = res.data.data.data.records;
					this.groupChatListPage.total = res.data.data.data.total;
				}
			});
		},
		// 分页
		groupChatListHandleSizeChange(size) {
			this.groupChatListPage.size = size;
			this.getGroupChatList();
		},
		groupChatListHandleCurrentChange(current) {
			this.groupChatListPage.current = current;
			this.getGroupChatList();
		},
	},
};
</script>
<style lang="scss" scoped>
.madp-ref-item {
	display: flex;
	// flex-wrap: wrap;
	flex-direction: column;
}
.madp-group-list-search {
	.el-form {
		display: flex;
		justify-content: flex-end;
	}
	&.isFold {
		.el-form {
			justify-content: space-between;
		}
	}
	.madp-item-btn {
		/deep/.el-form-item__content {
			display: flex;
			margin-left: 0 !important;
		}
	}

	/deep/ .el-date-editor .el-range-separator {
		width: 25px !important;
	}
}
// 分页
.madp-pagination-wrap {
	float: right;
	margin-top: 20px;
	margin-bottom: 18px;
}
.madp-pagination {
	margin-top: 15px;
	display: flex;
	justify-content: flex-end;
}
.madp-search-input {
	width: 96%;
}
.madp-warn-toast {
	font-size: 12px;
	color: red;
}
.madp-content-display {
	margin-bottom: 12px;
	display: flex;
	align-items: center;
	img {
		max-width: 100px;
	}
	.madp-content-text {
		padding-left: 12px;

		.madp-content-desc {
			font-size: 12px;
			color: #999;
		}
	}
}
.madp-group-table {
	height: 50vh;
	overflow: auto;
}
.madp-member-wrap {
	max-height: 300px;
	overflow: auto;
}
.madp-dialog-detail {
	height: 60vh;
	.el-scrollbar {
		height: 100%;
	}
}
.madp-box {
	/deep/ .el-scrollbar__wrap {
		max-height: 60vh;
	}
	.madp-chat-nodata {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}
}
.madp-customer {
	width: 100%;
	display: flex;
	justify-content: flex-start;
}
.madp-employee {
	width: 100%;
	display: flex;
	justify-content: flex-end;
	.madp-chat-content,
	.madp-chat-info {
		display: flex;
		justify-content: flex-end;
	}
}
.madp-chat {
	width: 100%;
	margin-bottom: 24px;
	&-info {
		&-user,
		&-time {
			margin: 0 10px;
		}
	}
	&-content {
		margin: 10px;
		// background-color: #2a57a0;
		color: #fff;
		&-remove {
			width: 100%;
			display: flex;
			justify-content: center;
			color: #999;
		}
		&-box {
			img {
				width: 200px;
			}
		}
		a {
			text-decoration: none;
		}
		&-box,
		p {
			display: inline-block;
			border-radius: 8px;
			padding: 10px;
			background-color: #2a57a0;
			color: #fff;
		}
		a,
		p {
			color: #fff;
		}
	}
}
</style>
